<template>
	<div class="container">
		<div class="wrapper">
			<h1>KGC后台管理系统</h1>
			<el-form label-width="auto" :model="form" :rules="rules" ref="form">
				<el-form-item label="" prop="username">
					<el-input v-model="form.username" placeholder="用户名">
						<i slot="prefix" class="el-input__icon el-icon-user"></i>
					</el-input>
				</el-form-item>
				<el-form-item label="" prop="password">
					<el-input v-model="form.password" placeholder="密码" show-password>
						<!-- show-password  小眼睛 -->
						<i slot="prefix" class="el-input__icon el-icon-lock"></i>
					</el-input>
				</el-form-item>
				<el-row>
					<el-button type="primary" @click="login">登录</el-button>
					
				</el-row>
			</el-form>
		</div>
	</div>

</template>

<script>
	export default {
		name: 'Login',
		data() {
			return {
				form: {
					username: 'admin',
					password: 'admin',
				},
				rules: {
					username: [{
							required: true,
							message: '请输入用户名',
							trigger: 'blur'
						},
						{
							min: 3,
							max: 18,
							message: '长度在 3 到 18 之间',
							trigger: 'blur'
						}
					],
					password: [{
							required: true,
							message: '请输入密码',
							trigger: 'blur'
						},
						{
							min: 3,
							max: 18,
							message: '长度在 3 到 18 之间',
							trigger: 'blur'
						}
					],
				}
			}
		},
		methods: {
			...mapMutations(['setUser']),
			login() {
				this.isloading = true
				this.$api.login({
					username: this.form.username,
					password: this.form.password
				}).then(res => {
					console.log(res);
					// this.$store.commit('setUser', res.data)
					this.setUser(res.data)
					window.sessionStorage.setItem('token', res.data.token)
					this.isloading = false
					this.$router.push('/')
					this.$message({
						message: '恭喜你，登录成功',
						type: 'success'
					});
				})
		
			}
		}
	}
</script>


<style>
	.container {
		width: 500px;
		height: 320px;
		background-color: #fff;
		margin: 120px auto;
	}

	.wrapper h1 {
		font-size: 14px;
		text-align: center;
		padding: 20px 0 30px 0;
		font-weight: 400;
	}

	.wrapper {
		padding: 0px 30px;
	}

	.el-row .el-button{
		width: 440px;
		height: 100%;
		
	}
</style>
